<template>
  <el-card class="wisplm-todo-list">
    <el-row slot="header" style="font-size: 30px; text-align: left;">
      <el-col>
        <span>To Do List</span>
      </el-col>
    </el-row>
    <el-row v-for="(toDoData, index) of toDoDataList" :key="index" class="wisplm-todo-item">
      <el-col :span="2">
        <el-checkbox style="margin-top: 20%" @change="selectedToDo(index)"></el-checkbox>
      </el-col>
      <el-col :span="18">
        <el-row>
          <el-col class="wisplm-todo-item_remark">{{ toDoData['remark'] }}</el-col>
          <el-col class="wisplm-todo-item_time">{{ toDoData['time'] }}</el-col>
        </el-row>
      </el-col>
      <el-col :span="2" :offset="2">
        <el-dropdown trigger="click">
          <el-button class="el-dropdown-link" :style="{'background-color': toDoData['priority'], 'color': 'white'}"
                     circle type="text">...
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>Edit</el-dropdown-item>
            <el-dropdown-item>Delete</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
export default {
  name: "index",
  props: ['toDoDataList'],
  data() {
    return {
      // toDoDataList: [
      //   {
      //     time: '29 July 2020 - 02:26 PM',
      //     remark: 'Get Up',
      //     priority: '#36C95F',
      //   },
      //   {
      //     time: '29 July 2020 - 02:26 PM',
      //     remark: 'Stand Up',
      //     priority: '#369DC9',
      //   },
      //   {
      //     time: '29 July 2020 - 02:26 PM',
      //     remark: 'Don\'t give up the fight',
      //     priority: '#2bc155',
      //   },
      //   {
      //     time: '29 July 2020 - 02:26 PM',
      //     remark: 'Do something else',
      //     priority: '#ffb800',
      //   },
      // ]
    }
  },
  methods: {
    selectedToDo(index) {
      this.$emit('selectedToDo', index)
    }
  }
}
</script>

<style scoped>
.wisplm-todo-list {
  /*width: 30%;*/
  height: 350px;
}

.wisplm-todo-list >>> .el-card__body {
  height: 240px;
  overflow-y: auto;
  -webkit-scroll-snap-type: inline;
}

.wisplm-todo-list >>> .el-card__body::-webkit-scrollbar {
  width: 5px;
}

.wisplm-todo-item {
  text-align: left;
  border-bottom: 1px solid #eaeaea;
  padding-bottom: 15px;
  margin-bottom: 15px;
}

.wisplm-todo-item_remark {
  font-size: 16px;
  line-height: 19px;
}

.wisplm-todo-item_time {
  font-size: 12px;
  line-height: 18px;
  color: #89879f;
}
</style>
